<template>
  <div class="LeftOne">
    <div class="title_box">
      <div class="title_class">在途气瓶</div>
      <div class="numAll">总计: 1000个</div>
    </div>
    <div class="chart_box" ref="bar_chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'LeftThreeChart',
  props: {
    dataList1: {
      type: Array,
      default: () => [300, 498, 778, 382, 299, 372]
    }
  },
  computed: {
    totalPage() {
      return this.dataList.length % this.currentSize === 0
        ? this.dataList.length / this.currentSize
        : this.dataList.length / this.currentSize + 1;
    }
  },
  data() {
    return {
      chartInstance: null,
      timerId: null,
      currentPage: 1,
      currentSize: 5,
      dataList: [
        {
          name: '送装1',
          value: 100
        },
        {
          name: '在途',
          value: 220
        },
        {
          name: '送装',
          value: 100
        },
        {
          name: '冲撞',
          value: 300
        },
        {
          name: '返程',
          value: 200
        },
        {
          name: '送装',
          value: 330
        },
        {
          name: '冲撞',
          value: 230
        },
        {
          name: '返程',
          value: 100
        },
        {
          name: '返程',
          value: 200
        },
        {
          name: '返程',
          value: 120
        }
      ],
      option: {
        grid: {
          left: '5%',
          right: '5%',
          top: '20%',
          bottom: '0%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            return parms.marker + ' ' + parms.name + '：' + parms.value + '个';
          }
        },
        xAxis: {
          type: 'category', // category(坐标轴类型)
          data: [],
          axisTick: {
            // 坐标轴刻度相关配置
            show: false // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            lineStyle: {
              // 坐标轴轴线样式
              color: 'rgba(255,255,255,0.15)' // 坐标轴轴线颜色
            }
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: '#ffffff',
            fontSize: 14,
            margin: 20
          }
        },
        yAxis: {
          type: 'value', // value(数值轴,适用于连续数据)
          axisTick: {
            // 坐标轴刻度相关配置
            show: false // 是否显示坐标轴刻度
          },
          axisLine: {
            // 坐标轴轴线相关配置
            show: false // 是否显示坐标轴轴线
          },
          axisLabel: {
            // 坐标轴刻度标签相关配置
            color: '#ffffff',
            fontSize: 14
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            lineStyle: {
              // 分割线配置
              color: 'rgba(255,255,255,0.15)' // 分割线颜色
            }
          }
        },
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          {
            type: 'pictorialBar', // pictorialBar(象形柱图)
            label: {
              // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
              show: true, //是否显示标签
              position: ['15', '-28'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
              color: '#01E4FF',
              fontSize: 14
            },
            symbolSize: [40, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
            symbolOffset: [0, 10], // 图形相对于原本位置的偏移
            z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
            itemStyle: {
              // 图形样式
              // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
              // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                // 这里 offset: 0 1 ,表示从下往上的渐变色
                {
                  offset: 0, // 0%处的颜色
                  color: 'rgba(31,155,255,1)'
                },
                {
                  offset: 1, // 100%处的颜色
                  color: 'rgba(0,229,255,1)'
                }
              ])
            },
            data: []
          },
          // 中间的长方形柱状图(柱状图):bar
          {
            type: 'bar', // 柱状图
            barWidth: 40, // 柱条的宽度,不设时自适应
            barGap: '0%', // 柱子与柱子之间的距离
            itemStyle: {
              // 图形样式
              // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
              // 下面就是使用线性渐变
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0, // 0%处的颜色
                    color: 'rgba(0,229,255,0.5)'
                  },
                  {
                    offset: 1, // 100%处的颜色
                    color: '#1F9BFF'
                  }
                ]
              }
            },
            data: []
          },
          // 顶部的椭圆形(象形柱图):pictorialBar
          {
            type: 'pictorialBar',
            symbolSize: [40, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: 'rgba(31,155,255,1)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,229,255,1)'
                  }
                ],
                false
              )
            },
            data: []
          }
        ]
      }
    };
  },

  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.bar_chart);
      this.chartInstance.setOption(this.option);
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId);
      });
      this.chartInstance.on('mouseout', () => {
        this.startInterval();
      });
    },
    // 更新图表
    updateChart() {
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      const showData = this.dataList.slice(start, end);
      const dataNames = showData.map((item) => {
        return item.name;
      });

      const dataValues = showData.map((item) => {
        return item.value;
      });
      this.option.xAxis.data = dataNames;
      this.option.series[0].data = dataValues;
      this.option.series[1].data = dataValues;
      this.option.series[2].data = dataValues;
      this.chartInstance.setOption(this.option, false);
    },
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 3000);
    }
  },
  mounted() {
    this.initChart();
    this.updateChart();
    this.startInterval();
  },
  destroyed() {
    clearInterval(this.timerId);
  }
};
</script>

<style lang="scss" scoped>
.LeftOne {
  // background: url('../assets/leftThree.png');
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(
      to right,
      rgba(59, 247, 240, 0.6),
      rgb(41, 74, 71)
    );
    height: 34px;
    padding: 0 20px;
    .title_class {
      color: rgb(15, 246, 238);
      font-size: 18px;
      display: flex;
      align-items: center;
      font-weight: 600px;
      &::before {
        content: ' ';
        display: block;
        width: 4px;
        height: 18px;
        background-color: rgb(15, 246, 238);
        margin-right: 10px;
      }
    }
    .numAll {
      color: #36e2f7;
      font-weight: 500;
    }
  }

  .chart_box {
    height: calc(100% - 34px);
  }
}
</style>
